$puzzle-btn: "puzzle-btn";

// base properties
$btn-font-weight: 400;
$btn-padding-y: 0.375rem !default;
$btn-padding-x: 0.75rem !default;
$btn-font-family: $font-family-base !default;
$btn-font-size: $font-size-base !default;
$btn-line-height: $line-height-base !default;

//不同大小按钮的 padding 和 font size
$btn-padding-y-sm: 0.25rem !default;
$btn-padding-x-sm: 0.5rem !default;
$btn-font-size-sm: $font-size-sm !default;

$btn-padding-y-lg: 0.5rem !default;
$btn-padding-x-lg: 1rem !default;
$btn-font-size-lg: $font-size-lg !default;

// 按钮边框
$btn-border-width: $border-width !default;

// 按钮其他
$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
$btn-disabled-opacity: 0.65 !default;

// 链接按钮
$btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-disabled-color: $gray-600 !default;

// 按钮 radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-border-radius-half: 50% !default;

$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;

.#{$puzzle-btn} {
  position: relative;
  display: inline-block;
  font-weight: $btn-font-weight;
  font-family: $btn-font-family;
  line-height: $btn-line-height;
  white-space: nowrap;
  vertical-align: center;
  background-image: none;
  border: $btn-border-width solid transparent;

  @include button-size(
    $btn-padding-x,
    $btn-padding-y,
    $btn-font-size,
    $btn-border-radius
  );
  @include button-style(
    $white,
    $gray-400,
    $body-color,
    $white,
    $primary,
    $primary
  );

  &-label {
    padding: 0 8px;
  }

  box-shadow: $btn-box-shadow;
  cursor: pointer;
  transition: $btn-transition;
  user-select: none;

  &.disable,
  &[disabled] {
    cursor: not-allowed;
    opacity: $btn-disabled-opacity;
    box-shadow: none;

    > * {
      pointer-events: none;
    }
  }
}

// small size
.#{$puzzle-btn}-sm {
  @include button-size(
    $btn-padding-x-sm,
    $btn-padding-y-sm,
    $btn-font-size-sm,
    $btn-border-radius-sm
  );
}

// large size
.#{$puzzle-btn}-lg {
  @include button-size(
    $btn-padding-x-lg,
    $btn-padding-y-lg,
    $btn-font-size-lg,
    $btn-border-radius-lg
  );
}

.#{$puzzle-btn}-link {
  @include button-style($white, $white, $primary);

  box-shadow: none;
}

.#{$puzzle-btn}-text {
  @include button-style($white, $white, $body-color, $gray-100);

  box-shadow: none;
}

.#{$puzzle-btn}-primary {
  @include button-style($primary, $primary, $white);
}

.#{$puzzle-btn}-danger {
  @include button-style($danger, $danger, $white);
}

.#{$puzzle-btn}-dashed {
  border-color: $gray-500;
  border-style: dashed;
}

.#{$puzzle-btn}-ghost {
  background: transparent;
}

.#{$puzzle-btn}-block {
  display: block;
}

.#{$puzzle-btn}-circle {
  @include flex(inline-flex);
  @include button-circle($circle-radius-base);

  line-height: $line-height-sm;
  white-space: normal;
  overflow: hidden;
}
